<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 如果pid为空字符串， 那么证明当前项是一级菜单
      // 一级菜单就要添加children数组，作为二级菜单的父元素
      const arr = [
        { id: '29', pid: '', name: '总裁办' },
        { id: '2c', pid: '', name: '财务部' },
        { id: '2d', pid: '2c', name: '财务核算部' },
        { id: '2f', pid: '2c', name: '薪资管理部' },
        { id: 'd2', pid: '', name: '技术部' },
        { id: 'd3', pid: 'd2', name: 'Java研发部' },
      ];

      function transformListToTree(arr) {
        // 我要找到数组里面，id="2c" 的那个元素  arr.find  obj['2c']
        // const res = arr.find(item => item.id === '2c')
        // obj['2c']
        // 对象取值法
        const obj = {};
        arr.forEach((item) => {
          // 对象使用中括号的语法， 专门针对变量的时候，添加一些动态属性
          obj[item.id] = item;

          // 默认的假值  0 '' false undeifned null
          if (!item.pid) {
            // 进入了这个if条件， 证明当前item是一级菜单，需要添加children属性
            item.children = [];
          }
        });

        console.log(obj);

        // 因为这个函数调用完之后，要返回一个新数组给el-tree组件使用
        const newArr = [];
        // 下面又要写一个循环，专门给我们来整理新数组的
        arr.forEach((item) => {
          // 现在的操作需要两个对象  一个是父对象， 一个是子对象
          const parent = obj['item.pid'];
          // const parent = arr.find(item => item.id === '2c')  // 数组取值法
          // const parent = obj['2c']    对象取值法arr[2]
          // const parent = obj[''] // 循环第一次
          // const parent = obj[''] // 循环第二次
          // const parent = obj['2c'] // 循环第三次
          if (parent) {
            // 进入了这个条件分支： 证明当前的item是子元素
            parent.children?.push(item);
          } else {
            // 进入了这个条件分支： 证明当前的item是父元素
            newArr.push(item);
          }
        });

        console.log(newArr);

        return newArr;
      }

      // const o = {};
      // o.name = '张三';
      // o['name'] = '李四';

      transformListToTree(arr);
    </script>
  </body>
</html>
